import React,{ Component }  from 'react';
import { Row, Col, Card, Timeline, Icon } from 'antd';
import BreadcrumbCustom from './BreadcrumbCustom';
import EchartsViews from './dashboard/EchartsViews';
import EchartsProjects from './dashboard/EchartsProjects';
import b1 from '../../style/imgs/b1.jpg';

class Dashboard extends Component {
    constructor(props) {
        super(props);
        console.log(123)
    }
    render() {
        return (
          <div className="gutter-example button-demo">
              <BreadcrumbCustom />
              <Row gutter={10}>
                  <Col className="gutter-row" span={4}>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="clear y-center">
                                  <div className="pull-left mr-m">
                                      <Icon type="heart" className="text-2x text-danger" />
                                  </div>
                                  <div className="clear">
                                      <div className="text-muted">收藏</div>
                                      <h2>301</h2>
                                  </div>
                              </div>
                          </Card>
                      </div>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="clear y-center">
                                  <div className="pull-left mr-m">
                                      <Icon type="cloud" className="text-2x" />
                                  </div>
                                  <div className="clear">
                                      <div className="text-muted">云数据</div>
                                      <h2>30122</h2>
                                  </div>
                              </div>
                          </Card>
                      </div>
                  </Col>
                  <Col className="gutter-row" span={4}>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="clear y-center">
                                  <div className="pull-left mr-m">
                                      <Icon type="camera" className="text-2x text-info" />
                                  </div>
                                  <div className="clear">
                                      <div className="text-muted">照片</div>
                                      <h2>802</h2>
                                  </div>
                              </div>
                          </Card>
                      </div>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="clear y-center">
                                  <div className="pull-left mr-m">
                                      <Icon type="mail" className="text-2x text-success" />
                                  </div>
                                  <div className="clear">
                                      <div className="text-muted">邮件</div>
                                      <h2>102</h2>
                                  </div>
                              </div>
                          </Card>
                      </div>
                  </Col>
                  <Col className="gutter-row" span={16}>
                      <div className="gutter-box">
                          <Card bordered={false} className={'no-padding'}>
                              <EchartsProjects />
                          </Card>
                      </div>
                  </Col>
                  <Col className="gutter-row" span={8}>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="pb-m">
                                  <h3>任务</h3>
                                  <small>10个已经完成，2个待完成，1个正在进行中</small>
                              </div>
                              <a className="card-tool"><Icon type="sync" /></a>
                              <Timeline>
                                  <Timeline.Item color="green">新版本迭代会</Timeline.Item>
                                  <Timeline.Item color="green">完成网站设计初版</Timeline.Item>
                                  <Timeline.Item color="red">
                                      <p>联调接口</p>
                                      <p>功能验收</p>
                                  </Timeline.Item>

                                  <Timeline.Item color="#108ee9">
                                      <p>登录功能设计</p>
                                      <p>权限验证</p>
                                      <p>页面排版</p>
                                  </Timeline.Item>
                              </Timeline>
                          </Card>
                      </div>
                  </Col>
                  <Col className="gutter-row" span={8}>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="pb-m">
                                  <h3>消息栏</h3>
                              </div>
                              <a className="card-tool"><Icon type="sync" /></a>
                              <ul className="list-group no-border">
                                  <li className="list-group-item">
                                      <a href="" className="pull-left w-40 mr-m">
                                          <img src={b1} className="img-responsive img-circle" alt="test" />
                                      </a>
                                      <div className="clear">
                                          <a href="" className="block">鸣人</a>
                                          <span className="text-muted">终于当上火影了！</span>
                                      </div>
                                  </li>
                                  <li className="list-group-item">
                                      <a href="" className="pull-left w-40 mr-m">
                                          <img src={b1} className="img-responsive img-circle" alt="test" />
                                      </a>
                                      <div className="clear">
                                          <a href="" className="block">佐助</a>
                                          <span className="text-muted">吊车尾~~</span>
                                      </div>
                                  </li>
                                  <li className="list-group-item">
                                      <a href="" className="pull-left w-40 mr-m">
                                          <img src={b1} className="img-responsive img-circle" alt="test" />
                                      </a>
                                      <div className="clear">
                                          <a href="" className="block">小樱</a>
                                          <span className="text-muted">佐助，你好帅！</span>
                                      </div>
                                  </li>
                                  <li className="list-group-item">
                                      <a href="" className="pull-left w-40 mr-m">
                                          <img src={b1} className="img-responsive img-circle" alt="test" />
                                      </a>
                                      <div className="clear">
                                          <a href="" className="block">雏田</a>
                                          <span className="text-muted">鸣人君。。。那个。。。我。。喜欢你..</span>
                                      </div>
                                  </li>
                              </ul>
                          </Card>
                      </div>
                  </Col>
                  <Col className="gutter-row" span={8}>
                      <div className="gutter-box">
                          <Card bordered={false}>
                              <div className="pb-m">
                                  <h3>访问量统计</h3>
                                  <small>最近7天用户访问量</small>
                              </div>
                              <a className="card-tool"><Icon type="sync" /></a>
                              <EchartsViews />
                          </Card>
                      </div>
                  </Col>
              </Row>
          </div>
        )
    }
}

export default Dashboard;
